<template>
  <!-- 重命名弹窗 -->
  <div v-if="showRenameModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
      <div class="px-6 py-4 border-b">
        <h3 class="text-lg font-semibold text-gray-900">重命名会话</h3>
      </div>
      <div class="px-6 py-4">
        <input
          v-model="newName"
          type="text"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          placeholder="请输入新的会话名称"
          @keyup.enter="handleRename"
          ref="nameInput"
        />
      </div>
      <div class="px-6 py-4 border-t flex justify-end space-x-3">
        <button
          @click="closeRenameModal"
          class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors"
        >
          取消
        </button>
        <button
          @click="handleRename"
          :disabled="!newName.trim() || isRenaming"
          class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {{ isRenaming ? '重命名中...' : '确认' }}
        </button>
      </div>
    </div>
  </div>

  <!-- 删除确认弹窗 -->
  <div v-if="showDeleteModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
      <div class="px-6 py-4 border-b">
        <h3 class="text-lg font-semibold text-gray-900">删除会话</h3>
      </div>
      <div class="px-6 py-4">
        <p class="text-gray-600">
          确定要删除会话 "<span class="font-medium text-gray-900">{{ conversationName }}</span>" 吗？
        </p>
        <p class="text-sm text-red-600 mt-2">此操作无法撤销。</p>
      </div>
      <div class="px-6 py-4 border-t flex justify-end space-x-3">
        <button
          @click="closeDeleteModal"
          class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors"
        >
          取消
        </button>
        <button
          @click="handleDelete"
          :disabled="isDeleting"
          class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {{ isDeleting ? '删除中...' : '确认删除' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from 'vue'
import { updateConversationName, deleteConversation } from '@/service'

interface Props {
  showRenameModal: boolean
  showDeleteModal: boolean
  conversationId: string
  conversationName: string
}

interface Emits {
  (e: 'close-rename'): void
  (e: 'close-delete'): void
  (e: 'rename-success', name: string): void
  (e: 'delete-success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const newName = ref('')
const isRenaming = ref(false)
const isDeleting = ref(false)
const nameInput = ref<HTMLInputElement>()

// 监听重命名弹窗显示状态，自动聚焦输入框
watch(() => props.showRenameModal, async (show) => {
  if (show) {
    newName.value = props.conversationName
    await nextTick()
    nameInput.value?.focus()
    nameInput.value?.select()
  }
})

const closeRenameModal = () => {
  newName.value = ''
  emit('close-rename')
}

const closeDeleteModal = () => {
  emit('close-delete')
}

const handleRename = async () => {
  if (!newName.value.trim() || isRenaming.value) return
  
  try {
    isRenaming.value = true
    await updateConversationName(props.conversationId, newName.value.trim())
    emit('rename-success', newName.value.trim())
    closeRenameModal()
  } catch (error) {
    console.error('重命名失败:', error)
    // 这里可以添加错误提示
  } finally {
    isRenaming.value = false
  }
}

const handleDelete = async () => {
  if (isDeleting.value) return
  
  try {
    isDeleting.value = true
    await deleteConversation(props.conversationId)
    emit('delete-success')
    closeDeleteModal()
  } catch (error) {
    console.error('删除失败:', error)
    // 这里可以添加错误提示
  } finally {
    isDeleting.value = false
  }
}
</script> 